// 导入Manager组件
import Manager, { type TableColumnConfig } from "../../component/Manager/index.tsx";
import dayjs from "dayjs";
import type { DetailFieldConfig, FormItemConfigs, MenuType, MenuItem } from "../../global.ts";
import AdminTreeSelect from "../../component/AdminTreeSelect/index.tsx";
import { MENU_TYPE, USER_STATUS_OPTIONS, MENU_TYPE_OPTIONS, MENU_TYPE_NAME } from "../../constants.ts";

export default function MenuManagerPage() {

  const apiConfig = {
    search: "/v1/admin/menu",
    edit: "/v1/admin/menu",
    add: "/v1/admin/menu",
    delete: "/v1/admin/menu",
  };

  const tableColumnConfig: TableColumnConfig[] = [
    {
      title: "序号",
      dataIndex: "_index",
      key: "_index",
      fixed: "left",
      width: 80,
    },
    {
      title: "菜单名称",
      dataIndex: "name",
      key: "name",
      fixed: "left",
    },
    {
      title: "菜单标识",
      dataIndex: "key",
      key: "key",
    },
    {
      title: "类型",
      dataIndex: "type",
      key: "type",
    },
    {
      title: "父级菜单",
      dataIndex: "parent_id",
      key: "parent_id",
    },
    {
      title: "图标",
      dataIndex: "icon",
      key: "icon",
    },
    {
      title: "页面路径",
      dataIndex: "page_path",
      key: "page_path",
    },
    {
      title: "接口路径",
      dataIndex: "api_path",
      key: "api_path",
    },  
    {
      title: "链接路径",
      dataIndex: "link_path",
      key: "link_path",
    },
    {
      title: "排序",
      dataIndex: "sort",
      key: "sort",
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      key: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      key: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "操作",
      dataIndex: "operate",
      key: "operate",
    },
  ];

  const searchFormFieldConfig: FormItemConfigs[] = [
    {
      label: "关键字",
      name: "keyword",
      type: "input",
      placeholder: "菜单名称/标识",
    },
    {
      label: "类型",
      name: "type",
      type: "select",
      options: MENU_TYPE_OPTIONS,
    },
  ];

  const addFormFieldConfig: FormItemConfigs[] = [
    {
      label: "菜单名称",
      name: "name",
      type: "input",
      rules: [{ required: true, message: "请输入菜单名称" }],
    },
    {
      label: "菜单标识",
      name: "key",
      type: "input",
      rules: [{ required: true, message: "请输入菜单标识" }],
    },
    {
      label: "类型",
      name: "type",
      type: "select",
      options: MENU_TYPE_OPTIONS,
      rules: [{ required: true, message: "请选择类型" }],
    },
    {
      label: "上级菜单",
      name: "parent_id",
      type: "custom",
      customNode: (
        <AdminTreeSelect
          treeApiUrl="/v1/admin/menu"
          fieldIdentifier={{
            pId: "parent_id",
            title: "name",
          }}
        />
      ),
      rules: [{ required: true, message: "请选择上级菜单" }],
    },
    {
      label: "图标",
      name: "icon",
      type: "input",
    },
    {
      label: "页面路径",
      name: "page_path",
      type: "input",
      rules: [{ required: true, message: "请输入页面路径" }],
      dependencies: ["type"],
      visible: (values: MenuItem) => values.type === MENU_TYPE.PAGE,
    },
    {
      label: "链接地址",
      name: "link_path",
      type: "input",
      rules: [{ required: true, message: "请输入链接地址" }],
      dependencies: ["type"],
      visible: (values: MenuItem) => values.type === MENU_TYPE.LINK,
    },
    {
      label: "接口路径",
      name: "api_path",
      type: "input",
      rules: [{ required: true, message: "请输入接口路径" }],
      dependencies: ["type"],
      visible: (values: MenuItem) => values.type === MENU_TYPE.API,
    },
    {
      label: "排序",
      name: "sort",
      type: "number",
    },
    {
      label: "状态",
      name: "is_disabled",
      type: "select",
      options: USER_STATUS_OPTIONS,
      rules: [{ required: true, message: "请选择状态" }],
    },
  ];

  const editFormFieldConfig: FormItemConfigs[] = [
    {
      label: "ID",
      name: "id",
      type: "hidden",
    },
    ...addFormFieldConfig,
  ];

  const detailFieldConfig: DetailFieldConfig[] = [
    {
      title: "序号",
      dataIndex: "_index",
    },
    {
      title: "ID",
      dataIndex: "id",
    },
    {
      title: "菜单名称",
      dataIndex: "name",
    },
    {
      title: "菜单标识",
      dataIndex: "key",
    },
    {
      title: "类型",
      dataIndex: "type",
    },
    {
      title: "上级菜单",
      dataIndex: "parent_id",
    },
    {
      title: "图标",
      dataIndex: "icon",
    },
    {
      title: "页面路径",
      dataIndex: "page_path",
    },
    {
      title: "接口路径",
      dataIndex: "api_path",
    },
    {
      title: "链接路径",
      dataIndex: "link_path",
    },
    {
      title: "排序",
      dataIndex: "sort",
    },
    {
      title: "状态",
      dataIndex: "is_disabled",
      render: (text: number) => text === 1 ? "禁用" : "启用",
    },
    {
      title: "创建时间",
      dataIndex: "created_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
    {
      title: "更新时间",
      dataIndex: "updated_at",
      render: (text: string) => dayjs(text).format("YYYY-MM-DD HH:mm:ss"),
    },
  ];

  return (
    <Manager
      apiConfig={apiConfig}
      tableColumnConfig={tableColumnConfig}
      searchFormFieldConfig={searchFormFieldConfig}
      editFormFieldConfig={editFormFieldConfig}
      addFormFieldConfig={addFormFieldConfig}
      detailFieldConfig={detailFieldConfig}
      enableAdd
      enableEdit
      enableDelete
      defaultViewType="list"
      searchFields={["name", "key"]}
    />
  );
}
